3-5

日期物件是另一類 JavaScript 的內建物件，我們可用 new Date() 來產生一個日期物件，並用各種方法來取出此物件的相關資訊，如日期、時數、秒數等。例如：

Example（date01.htm）：

上述範例的完整原始檔案如下：

原始檔（date01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>日期物件的方法</h2>
<hr>

<script>
today = new Date();
document.write("<br>標準字串：today.toString() = "+today.toString());
document.write("<br>地方字串：today.toLocaleString() = "+today.toLocaleString());
document.write("<br>年份：today.getFullYear() = "+today.getFullYear());
document.write("<br>月份：today.getMonth() = "+today.getMonth());
document.write("<br>日數：today.getDate() = "+today.getDate());
document.write("<br>時數：today.getHours() = "+today.getHours());
document.write("<br>分數：today.getMinutes() = "+today.getMinutes());
document.write("<br>秒數：today.getSeconds() = "+today.getSeconds());
document.write("<br>星期幾：today.getDay() = "+today.getDay());
</script>

<hr>
</body>
</html>

在上例中，new Date() 即會產生包含現在日期的一個日期物件，常用的方法可以列表說明如下：

物件方法說明
DatetoString()以標準字串來表示日期物件
toLocaleString()以地方字串（依作業系統而有所不同）來表示日期物件
getYear()取得西元年份（此方法已經過時，會依瀏覽器而有不同結果，建議不要使用）
getFullYear()取得完整西元年份
getMonth()取得月份（需注意：0 代表一月，因此例如若是八月，結果就是 7）
getDate()取得日數
getHours()取得時數
getMinutes()取得分鐘數
getSeconds()取得秒數
getDay()取得星期數（例如若是星期四，結果就是 4；若是星期日，結果就是 0）

事實上有關日期物件的方法相當多，在下列範例中，我們使用 eval() 來簡化程式，並對這些方法進行較完整的列表：

Example（date02.htm）：

上述範例的完整原始檔案如下：

原始檔（date02.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>日期物件的方法：使用 eval()</h2>
<hr>

<script>
today = new Date();		// 建立Date物件
// 列出與 Date 物件的一些方法
method =["getDate", "getDay", "getFullYear", "getYear", "getHours", "getMilliseconds",
	"getMinutes", "getMonth", "getSeconds", "getTime", "getTimezoneOffset",
	"getUTCDate", "getUTCDay", "getUTCFullYear", "getUTCHours", "getUTCMilliseconds",
	"getUTCMinutes", "getUTCMonth", "getUTCSeconds", "toGMTString", "toLocaleString",
	"toUTCString", "toString", "valueOf"];

// 列出執行這些方法後得到的結果
for (i=0; i<method.length; i++)
	document.writeln("<br> today." + method[i] + "() = " + eval("today."+method[i]+"();"));
</script>

<hr>
</body>
</html>

Hint
  • UTC 代表「世界時間座標」（Universal Time Coordinate）。
  • GMT 代表「格林威治標準時間」（Greenwich Mean Time）。

在上述方法中，最常用到的就是 getTime()，此方法可以傳回來某個時間物件與 1970 年 1 月 1 日零時的時間差距，單位是 1/1000 秒。例如，我們可以使用這個方法，來寫出一個簡易的馬錶程式，如下：

Example（dateGetTime01.htm）：

當你按下「開始計時」後，程式碼內部立即開始計時，直到你按下「停時計時」時，就會在文字欄位顯示經過時間。上述範例的完整原始檔案如下：

原始檔（dateGetTime01.htm）：（灰色區域按兩下即可拷貝）
<html>
<body>
<h2 align=center>簡易馬錶</h2>
<hr>

<script language=javascript>
function go(form){
	switch(form.myButton.value){
		case "開始計時":
			date1=new Date();				// 取得目前時間
			form.timeDisplay.value="計時中...";		// 設定時間顯示為 計時中...
			form.myButton.value="停止計時";			// 將按鈕文字改為「停止計時」
			break;
		case "停止計時":
			date2=new Date();				// 取得目前時間
			timeDiff=(date2.getTime()-date1.getTime())/1000;// 時間差距，以秒為單位
			form.timeDisplay.value=timeDiff;		// 設定時間顯示
			form.myButton.value="歸零";			// 將按鈕文字改為「歸零」
			break;
		case "歸零":
			form.timeDisplay.value="00:00:00";		// 設定時間顯示為 00:00:00
			form.myButton.value="開始計時";			// 將按鈕文字改為「開始計時」
			break;
		default:
			alert("Error!");
			break;
	}
}
</script>
<center>
<form>
<input type="button" name="myButton" value="開始計時" onClick="go(this.form)">
<p>經過時間：<input type=text name="timeDisplay" value="00:00:00">秒
</form>
</center>

</body>
</html>

在上述範例中，我們使用按鈕中的文字來代表系統狀態，在不同的狀態下，按下按鈕會有不同的反應，說明如下：

上述流程，可用圖形顯示如下：

Example（dateGetTime01.ppt）：

Hint
當然，你也可以設計在計時過程中，文字欄位不斷顯示目前計時結果，但這種密集的即時顯示會比較消耗 CPU 的計算時間。欲達到此功能，必須使用 setTimeOut() 函數，將會在後面詳述。

我們也可以產生一個日期物件後，再對此物件進行修改（例如改變秒數或月份）或格式轉換，相關的方法很多，包含 setDate、setFullYear、setHours、setMilliseconds、setMinutes、setMonth、setSeconds、setTime、setUTCDate、setUTCFullYear、setUTCHours、setUTCMilliseconds、setUTCMinutes、setUTCMonth、setUTCSeconds、setYear 等，在此不再贅述。

JavaScript 程式設計與應用：用於網頁用戶端